<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>audio.js</title>

    <script src="./audiojs/audio.min.js"></script>
    <link rel="stylesheet" href="./includes/index.css" media="screen">
    <script>
        audiojs.events.ready(function() {
            audiojs.createAll();
        });
    </script>
    <script>
        function playaudio() {
            let imgaudio = document.getElementsByTagName("audio")[0];
            if (imgaudio.paused) {
                imgaudio.play()
            } else {
                imgaudio.pause()
            }


            // console.log(document.getElementsByTagName("audio")[0]);
        }

        //接收多值
        function manyValues() {
            var url = window.location.search;
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                str = str.replace('{', '');
                str = str.replace('<', '');
                str = str.replace(';', '');
                strs = str.split("&");
                var key = new Array(strs.length);
                var value = new Array(strs.length);
                for (i = 0; i < strs.length; i++) {
                    key[i] = strs[i].split("=")[0]
                     value[i] = decodeURI(strs[i]).replace('symbol_and','&').replace(key[i], '').replace('=', '').replace(/</g, '').replace(/;/g, '');
                    //alert(key[i] + "=" + value[i]);
                }
                console.log(key);
                console.log(value);
                for (i = 0; i < strs.length; i++) {
                    if (key[i] == "title") {
                        document.getElementById("titleP").innerText = value[i];
                    }
                    if (key[i] == "music") {
                        document.getElementsByTagName("audio")[0].src = value[i];
                    }
                    if (key[i] == "image") {
                        document.getElementById("imageImg").src = value[i];
                    }
                }
            }
        }
    </script>
</head>

<body onload="manyValues()">

    <div id="all">
        <div class="left">
            <div id="image" class="image" onclick="playaudio()"><img class="image" id="imageImg" src="2.jpg"></div>
        </div>
        <div class="right">
            <div id="title">
                <p id="titleP">.</p>
            </div>
            <div id="divaudio">
                <audio src="1.mp3" preload="auto"></audio>
            </div>
        </div>


    </div>

</body>

</html>